import {
  Button,
  Drawer,
  Icon,
  ImgDefault,
  Popover,
  Space,
  Tag,
  Modal
} from "@bytedance/mona-ui"
import React, { useRef, useState } from "react"

import "./titpoi.scss"
import "@Styles/funcTabs.scss"

import { Agreement } from "@Utils/addConfigFuncs"

import { useAppDispatch, useAppSelector } from "~store"
import * as func from "~store/controller/funcTabs"

import Coupon from "./componets/coupon"
import Ltalp from "./componets/ltalp"
import NewPerson from "./componets/newPerson"
import ROIcompute from './componets/ROIcompute'
import ClearNotFlow from './componets/clearNotFlow'
import AiWeiguiJianCe from './componets/AiWeiguiJianCe'
import ProdectOptimization from './componets/prodectOptimization'

const ossurl = import.meta.env.VITE_PLASMO_PUBLIC_CN_OSS
export default function FuncTabs() {
  let tablist = useAppSelector((state) => state.funcTabs.tablist)
  const dispatch = useAppDispatch()
  type ChildMethods = {
    // 子组件暴露给父组件的方法
    someMethod: () => void
  }
  const childRef = useRef<ChildMethods>(null)
  const chidActRef = useRef<ChildMethods>(null)
  const prodectOptimizationRef = useRef<ChildMethods>(null)
  // const childRef2 = useRef<ChildMethods>(null);
  const [footerStatus, setFooterStatus] = useState(true)

  return (
    <div className="contentbox">

      <div
        className="iconsvg"
        onClick={() => {
          open("https://doulingyang.cn")
        }}>
        <img
          src={ossurl + "webimages/logo192.png"}
          alt=""
          className="logIcon"
        />
        {/* <Icon type="CollectionIcon"/> */}
      </div>
      <Space size={0} wrap>
        {tablist.map((item, index) => {
          return (
            <div key={index} style={{
              margin: "5px 0"
            }}>
              <Popover
                visible={item.showPopoverStatus || false}
                placement="bottom"
                content={
                  <Space direction="vertical">
                    <div>
                      抖羚羊新增
                      <Tag bordered type="success">
                        {item.title}
                      </Tag>
                      功能,点击立即体验{" "}
                    </div>
                    <div
                      className="moter"
                      style={{
                        width: "100%",
                        display: "flex",
                        justifyContent: "flex-end"
                      }}>
                      <Button
                        size="mini"
                        type="primary"
                        onClick={() => {
                          // item.showPopoverStatus = false
                          dispatch(func["setInfoData"]())
                        }}>
                        知道了
                      </Button>
                    </div>
                  </Space>
                }>
                <Popover
                  content={
                    <Space direction="vertical" align="center">
                      <div>邀约达人已升级，请联系客服领取使用教程</div>
                      <ImgDefault
                        mask={false}
                        borderRadius={8}
                        style={{ width: 120, height: 120, margin: "0 auto 10px" }}
                        // src={goodPrettify.pic}
                        imgSrc={
                          ossurl +
                          "webimages/code/WechatIMG6.jpg?time=" +
                          new Date().getTime()
                        }></ImgDefault>
                    </Space>
                  }
                  placement="bottom"
                  // title="邀约达人已升级，请联系客服领取使用教程"
                  trigger={
                    item.funcksy == "yaoyueDaren" ? "hover" : "contextMenu"
                  }>
                  <div
                    className="tabitem"
                    onClick={() => {
                      if (item.funcksy == "yaoyueDaren") {
                        return
                      }
                      Agreement().then(() => {
                        dispatch(func[item.funcksy](index))
                      })
                    }}>
                    <Button
                      type={item.active ? "primary" : "default"}
                      size="mini">
                      {" "}
                      <Icon type={item.icon} />
                      {item.title}
                    </Button>
                  </div>
                </Popover>
              </Popover>
              <Drawer
                visible={item.active}
                size="super"
                title={item.drawerTtile || "抖羚羊"}
                width={item.width || 966}
                footer={
                  <>
                    {footerStatus && !item.hideFoolter ? (
                      <div
                        className="addfooter"
                        style={{
                          display: "flex",
                          justifyContent: "flex-end"
                        }}>
                        <Space>
                          <Button
                            type="primary"
                            onClick={(e) => {
                              console.log("确认", item.funcksy)
                              if (item.funcksy == "coupon" && childRef.current) {
                                childRef.current?.someMethod()
                                return
                              }
                              if (item.funcksy === "LtaLp" && chidActRef.current) {
                                chidActRef.current?.someMethod()
                                return
                              }
                              if (item.funcksy === "prodectOptimization" && prodectOptimizationRef.current) {
                                prodectOptimizationRef.current?.someMethod()
                                return
                              }
                            }}>
                            确认
                          </Button>
                          <Button onClick={() => dispatch(func.clearbox(index))}>
                            取消
                          </Button>
                        </Space>
                      </div>
                    ) : null}
                  </>
                }
                // onOk={(e) => {

                // }}
                // //   footer="null"
                onCancel={() => dispatch(func.clearbox(index))}
                bodyStyle={{
                  padding: "0 24px"
                }}>
                {item.funcksy === "coupon" && (
                  <Coupon
                    ref={childRef}
                    clearBox={() => dispatch(func.clearbox(index))}
                    setFooterStatus={setFooterStatus}
                    actstr={item.actstr || "addCoupon"}
                  />
                )}
                {item.funcksy === "newPerson" && <NewPerson />}
                {item.funcksy === "LtaLp" && (
                  <Ltalp
                    ref={chidActRef}
                    clearBox={() => dispatch(func.clearbox(index))}
                    setFooterStatus={setFooterStatus}
                    actstr={item.actstr || "addCoupon"}
                  />
                )}
                {item.funcksy === "clearNoFlow" && <ClearNotFlow active={item.active} />}
                {item.funcksy === 'AiWeiguiJianCe' && <AiWeiguiJianCe active={item.active} />}
                {item.funcksy === 'prodectOptimization' && <ProdectOptimization
                  // setFooterStatus={setFooterStatus}
                  actstr={item.actstr} ref={prodectOptimizationRef} />}
              </Drawer>
              <Modal
                visible={item.modoSuatus}
                title={item.title || "抖羚羊"}
                width={item.width || 966}
                onCancel={() => dispatch(func.clearbox(index))}
                style={{
                  height: "100%"
                }}
                wrapClassName={"mocconterstop"}
                destroyOnClose={true}
                showCancel={false}
                onOk={() => dispatch(func.clearbox(index))}
              >
                {item.funcksy === "ROIcompute" && <ROIcompute></ROIcompute>}
              </Modal>
            </div>
          )
        })}
      </Space>

    </div>
  )
}
